<template>
  <div>
    <a-card title="告警类型信息汇总" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <ve-histogram
        :data="alarmTypeData"
        :extend="chartExtend"
        :colors="hourcolors"
        :judge-width="true"
        height="210px">
      </ve-histogram>
    </a-card>
    <a-card title="告警类型占比" :bordered="false" :headStyle="{ padding: '0 15px', border:0, marginTop: '15px'}" style="width:100%">
      <pie-chart id="alarmType" :opiton="optionAlarmType" style="width:100%; height:225px"></pie-chart>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
import pieChart from './pieChart'
export default {
  name: 'AlarmType',
  components: {
    pieChart
  },
  data () {
    return {
      hourcolors: ['#4688f1', '#759574', '#ecac6c', '#93aefc'],
      chartExtend: {
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: {
          label: { 
            show: true, 
            position: 'top' 
          }
        }
      },
      alarmTypeData: {
        columns: ['日期', '紧急告警', '主要告警', '次要告警', '警告告警'],
        rows: [
          // { '日期': '1/1', '紧急告警': 1393, '主要告警': 1093, '次要告警': 32, '警告告警': 32 }
        ]
      },
      optionAlarmType: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          data: ['系统', '应用', '网络', '安全']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                { value: 335, name: '系统' },
                { value: 310, name: '应用' },
                { value: 234, name: '网络' },
                { value: 135, name: '安全' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
          }
        ]
      }
    }
  },
  created () {
    this.getAlarmTypeData()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 告警类型信息汇总
     */
    getAlarmTypeData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 5; i += 1) {
        this.alarmTypeData.rows.push({
          '日期': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '紧急告警': Math.floor(Math.random() * 10), // 输出0～10之间的随机数
          '主要告警': Math.floor(Math.random() * 100), // 输出0～100之间的随机数
          '次要告警': Math.floor(Math.random() * 100), // 输出0～100之间的随机数
          '警告告警': Math.floor(Math.random() * 100) // 输出0～100之间的随机数
        })
      }
      this.alarmTypeData.rows.sort(function (a, b) {
        return Date.parse(a[ '日期' ]) - Date.parse(b[ '日期' ]) // 时间正序
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
